<template>
  <header class="header fx">
    <div class="light-word left">
      <p class="orange wd">2021易动工作室招新管理平台</p>
    </div>
    <div class="right light-word">
      <router-link :to="{ name: 'front' }">
        <span class="cm-front wd orange">前端</span>
      </router-link>
      <router-link :to="{ name: 'back' }">
        <span class="cm-back wd orange">后台</span>
      </router-link>
      <router-link :to="{ name: 'manage' }">
        <span class="cm-back wd orange">管理</span>
      </router-link>
    </div>
  </header>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style scoped lang='scss'>


.header {
  justify-content: space-between;
  height: 8rem;
  padding: 0 1rem;
  box-sizing: border-box;
  line-height: 8rem;
  border: 1px solid #eaeaea;
  font-size: 3rem;
  font-weight: bold;
  .light-word {
    .wd {
      display: inline;
      text-align: center;
      cursor: pointer;
      &:hover {
        color: #a29bfe;
      }
    }
    .orange {
      color: #a29bfe;
    }

    // .orange:hover {
    //   animation: orange 1.5s ease-in-out infinite alternate;
    // }
  }
  .right {
    .cm-back {
      margin-left: 2rem;
    }
  }
}
</style>